<template>
    <div>
        <el-form label-width="120rem">
            <el-form-item label="矩形样式：">
                <el-radio-group v-model="active_component.props.shapeType">
                    <el-radio :label="1">矩形</el-radio>
                    <el-radio :label="2">圆形</el-radio>
                    <el-radio :label="3">带头方框</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="上方框样式：" v-show="active_component.props.shapeType == 3">
                <div class="flex">
                    <div>宽度(px)
                        <el-input  style="width:100px"  v-model="active_component.props.headerWidth" placeholder="请输入宽度"></el-input>
                    </div>
                    <div style="margin-left: 10px;">高度(px)
                        <el-input style="width:100px;" v-model="active_component.props.headerHeight" placeholder="请输入高度"></el-input>
                    </div>
                    <div style="margin-left: 40px;">
                        <div class="flex">
                            背景颜色
                        <el-color-picker
                            @change="changeColor_gra"
                            v-model="active_component.props.background_top"
                            show-alpha
                        ></el-color-picker>
                        </div>
                    </div>
                    <div style="margin-left: 40px;">上边框圆角(px)
                        <el-input style="width:60px;" v-model="active_component.props.radius_top" placeholder="请输入圆角"></el-input>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="方框样式：" v-show="active_component.props.shapeType == 3">
                <div class="flex">
                    <div>
                        <div class="flex">
                            背景颜色
                        <el-color-picker
                            @change="changeColor_bottom"
                            v-model="active_component.style.backgroundColor"
                            show-alpha
                        ></el-color-picker>
                        </div>
                    </div>
                    <div style="margin-left: 40px;">下边框圆角(px)
                        <el-input style="width:60px;" v-model="active_component.props.radius_bottom" placeholder="请输入圆角"></el-input>
                    </div>
                </div>
            </el-form-item>
        </el-form>
        <div class="flex-center" style="margin-top: 10rem">
            <el-button size="small" type="" @click="closeTK">取消</el-button>
            <el-button size="small" type="primary" @click="pushcanvas">确定</el-button>
        </div>
    </div>
</template>

<script>
export default {
    props: ["componentId", "componentList", "activeCompont"],
    data() {
        return {
            active_component: {},
        }
    },
    created() {
        if(this.activeCompont){
            this.active_component =this.activeCompont
        }else{
            for (let key in this.componentList) {
                if (
                    this.componentList[key].isDialog &&this.componentList[key].props&&
                    this.componentList[key].props.name == this.componentId
                ) {
                    this.active_component =JSON.parse(JSON.stringify(this.componentList[key]))
                }
            }
        }
                    console.log(this.active_component,this.componentId,'2321')
    },
    methods: {
        closeTK(){
            this.$emit("closeTK")
        },
        pushcanvas() {
            if(this.activeCompont){
                this.$emit("closeTK")//关闭弹框
            }else{
                let canvasStyle = this.$store.state.canvasStyleData;
                let component = this.active_component;
                component.style.top = Number(canvasStyle.height);
                component.style.left = 0;
                this.$store.commit("addComponent", { component: component });
                canvasStyle.height = String(Number(canvasStyle.height) + Number(component.style.height));
                this.$store.commit("setCanvasStyle", canvasStyle);
                this.$emit("closeTK")//关闭弹框
            }
        },
        changeColor_gra(e) {
            this.active_component.props.background_top = e;
        },
        changeColor_bottom() {
            this.active_componnet.props.background_bottom = e
        }
    },
}
</script>

<style>

</style>
